<template>
  <view class="wrapper">
    <van-nav-bar :title="userStore.getConfig?.diamond_name" left-arrow @click-left="onClickLeft" />
    <view class="content">
      <view class="bgc">
        <image src="/src/static/images/bgc2.9ee71107.png" />
        <view class="bgc-con">
          <view class="bgc_a">
            <image src="/src/static/images/avatar.png" />
            <text>{{ userInfo.level }}&nbsp;&nbsp;{{ userInfo.mobile }}</text>
          </view>
          <view class="bgc_b">
            <view class="balance">
              <view class="bal_a">{{ userInfo.diamond }}</view>
              <view class="bal_b">我的{{ userStore.getConfig?.diamond_name }}</view>
            </view>
            <!-- <view class="singIn" @click="navigateTo('/pages/sign-in/index')">去签到</view>
            <view class="recharge" @click="navigateTo('/pages/share-poster/index')">邀请好友</view> -->
          </view>
        </view>
      </view>
      <view class="record">
        <view class="tle">{{ userStore.getConfig?.diamond_name }}收支记录</view>
        <view class="list-con" v-if="scrollList.length">
          <scroll-view class="detail_box" scroll-y="true">
            <view style="width: 96.5%">
              <view class="list" v-for="item in scrollList" :key="item.id">
                <view class="left">
                  <view class="describe">{{ item.name }}</view>
                  <view class="time">{{ item.time }}</view>
                </view>
                <view class="right">{{ item.money }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        <Empty v-else />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getUserInfoApi } from '@/api/index';
  import { onShow } from '@dcloudio/uni-app';

  const userStore = useUserStore();
  const scrollList = ref([{ id: 1, name: '签到获得', time: '2023-10-21 21:30:08', money: '+1' }]);
  const userInfo = ref<any>({});
  const onClickLeft = () => history.back();
  onShow(() => {
    getUserInfoApi().then((res) => {
      userInfo.value = {
        ...res,
        mobile: res.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
      };
    });
  });
</script>
<style lang="scss" scoped>
  .wrapper {
    overflow: hidden;
    height: 100%;
    background-color: #fff;
    :deep(.van-nav-bar .van-icon) {
      color: #000;
      font-size: 20px;
    }
    .content {
      padding: 0 4%;
      height: 100%;

      .bgc {
        overflow: hidden;
        position: relative;
        margin-top: 10px;
        border-radius: 3px;

        image {
          width: 100%;
          height: 150px;
        }

        &-con {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;

          .bgc_a {
            padding: 17px 19px 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            image {
              width: 31px;
              height: 31px;
              border-radius: 50%;
            }

            text {
              margin-left: 7px;
              font-size: 15px;
              color: #fff;
            }
          }

          .bgc_b {
            position: relative;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .balance {
              margin-left: 19px;

              .bal_a {
                margin-bottom: 5px;
                font-size: 23px;
                font-weight: 600;
                color: #fff;
              }

              .bal_b {
                font-size: 13px;
                color: #fff;
              }
            }

            .singIn {
              position: absolute;
              right: 0;
              top: -35px;
              width: 80px;
              height: 35px;
              line-height: 35px;
              text-align: center;
              font-size: 15px;
              font-weight: 600;
              color: #3f82fc;
              background: #fff;
              border-radius: 18px 0 0 18px;
            }

            .recharge {
              width: 80px;
              height: 35px;
              line-height: 35px;
              text-align: center;
              font-size: 15px;
              font-weight: 600;
              color: #3f82fc;
              background: #fff;
              border-radius: 18px 0 0 18px;
            }
          }
        }
      }

      .record {
        height: calc(100% - 160px);

        .tle {
          padding-top: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #323232;
        }

        .list-con {
          height: calc(100% - 32px);

          .detail_box {
            height: 100%;

            .list {
              padding: 19px 0 15px;
              border-bottom: 1px solid #eee;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .left {
                .describe {
                  font-size: 14px;
                  color: #323232;
                  margin-bottom: 7px;
                }

                .time {
                  font-size: 11px;
                  color: #9d9d9d;
                }
              }

              .right {
                font-size: 19px;
                font-weight: 600;
                color: #ed5225;
              }
            }
          }
        }
      }
    }
  }
</style>
